<template>
  <div class="home">
    <div class="w1200">
      <Banner />
      <div class="recom_list">
        <div class="h_title">
          <h3>热门歌单</h3>
          <span
            v-for="(item, index) in playlist_tags"
            :key="item.id"
            :class="index == playlist_index ? 'active' : ''"
            @click="choosePlayListType(index)"
            >{{ item.name }}</span
          >
        </div>
        <div>
          <PlayList :playList="playlist_list" />
        </div>
      </div>
      <div class="album_list">
        <div class="h_title">
          <h3>新碟上架</h3>
          <span
            v-for="(item, index) in album_area"
            :key="item.name"
            :class="index == album_index ? 'active' : ''"
            @click="chooseAlbumType(index)"
            >{{ item.name }}</span
          >
          <div class="wrapper">
            <AblumList :ablumList="album_list" />
          </div>
        </div>
      </div>
      <div class="top_list">
        <div class="h_title">
          <h3>排行榜</h3>
        </div>
        <el-row class="wrapper" :gutter="20">
          <el-col
            :span="6"
            v-for="item in top_list"
            :key="item.id"
            class="toplist_item"
          >
            <div class="coverImg">
              <el-image :src="item.coverImgUrl"></el-image>
            </div>
            <div class="toplist_wrapper">
              <h4 class="toplist_hd">{{ item.name }}</h4>
              <div class="toplist_songlist">
                <div
                  class="songitem"
                  v-for="(songItem, index) in songList[item.id]"
                  :key="songItem.id"
                >
                  <div class="songnum">{{ index + 1 }}</div>
                  <div class="songinfo">
                    <router-link
                      :to="{ path: '/songs', query: { id: item.id } }"
                      class="song_title"
                      >{{ songItem.name }}</router-link
                    >
                    <div class="song_author">
                      <router-link
                        :to="{ path: '/singer', query: { id: author.id } }"
                        class="song_name"
                        v-for="(author, k) in songItem.ar"
                        :key="k"
                        >{{
                          k !== 0 ? "/ " + author.name : author.name
                        }}</router-link
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mv_list">
        <div class="h_title">
          <h3>最新MV</h3>
          <span
            v-for="(item, index) in mv_area"
            :key="index"
            :class="index == mv_index ? 'active' : ''"
            @click="chooseMvType(index)"
            >{{ item }}</span
          >
          <div class="wrapper"><MvList :mvList="mv_list" /></div>
        </div>
      </div>
      <div class="artists_list">
        <div class="h_title">
          <h3>热门歌手</h3>
        </div>
        <div class="wrapper">
          <router-link
            :to="{ path: '/singer', query: { id: item.id } }"
            class="artists_item"
            :key="item.id"
            v-for="item in artists_list"
          >
            <div class="faceImg">
              <el-image :src="item.picUrl + '?param=120y120'">
                <div slot="placeholder" class="image-slot">
                  <i class="iconfont icon-placeholder"></i>
                </div>
              </el-image>
            </div>
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="albumSize">专辑：{{ item.albumSize }}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../../components/Banner/index";
import PlayList from "../../components/PlayList/index";
import AblumList from "../../components/AblumList/index";
import MvList from "../../components/MvList/index";
import {
  reqGetHotList,
  reqPlayList,
  reqGetAblumList,
  reqGetTopListDetail,
  reqGetDetail,
  reqGetMv,
  reqGetArtists,
} from "../../api/home";
export default {
  name: "index",
  components: {
    Banner,
    PlayList,
    AblumList,
    MvList,
  },
  data() {
    return {
      //热门歌单分类标签
      playlist_tags: [],
      //选中的下标
      playlist_index: 0,
      //热门歌单需要的参数
      playlist_params: { limit: 5, offset: 0 },
      // 热门歌单
      playlist_list: [],
      //新碟上架分类标签
      album_area: [
        {
          name: "全部",
          code: "all",
        },
        {
          name: "华语",
          code: "zh",
        },
        {
          name: "欧美",
          code: "ea",
        },
        {
          name: "韩国",
          code: "kr",
        },
        {
          name: "日本",
          code: "jp",
        },
      ],
      //新碟上架选中的下标
      album_index: 0,
      //新碟上架需要的参数
      album_params: { limit: 9 },
      //新碟歌单
      album_list: [],
      //排行榜
      top_list: [],
      //排行榜歌曲详情
      songList: [],
      //mv分类标签
      mv_area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      //mv选中的下标
      mv_index: 0,
      //mv的数据
      mv_list: [],
      //mv需要的请求参数
      mv_params: { limit: 10 },
      //热门歌手
      artists_list: [],
      //热门歌手需要的请求参数
      artists_params: { limit: 9 },
    };
  },
  async mounted() {
    // 热门歌单分类标签
    this.getHotTags();
    //热门歌单
    this.getPlayList(this.playlist_params);
    //新碟歌单
    this.getAlbum(this.album_params);
    //排行榜
    this.getToplist();
    //mv
    this.getMv(this.mv_params);
    //热门歌手
    this.getArtists(this.artists_params);
  },
  methods: {
    async getHotTags() {
      const res = await reqGetHotList();
      res.tags.unshift({ name: "为您推荐" });
      this.playlist_tags = res.tags.splice(0, 6);
    },
    async getPlayList(params) {
      const resPlayList = await reqPlayList(params);
      this.playlist_list = resPlayList.playlists;
    },
    async getAlbum(params) {
      const albumList = await reqGetAblumList(params);
      this.album_list = albumList.monthData.slice(0, 9);
    },
    async getToplist() {
      const topList = await reqGetTopListDetail();
      this.top_list = topList.list.splice(0, 4);
      this.top_list.forEach(async (item) => {
        const detailList = await reqGetDetail({ id: item.id });
        // this.songList = detailList.playlist.tracks.splice(0, 6);
        this.$set(
          this.songList,
          item.id,
          detailList.playlist.tracks.splice(0, 6)
        );
      });
    },
    async getMv(params) {
      const mvList = await reqGetMv(params);
      this.mv_list = mvList.data;
    },
    async getArtists(params) {
      const hotSinger = await reqGetArtists(params);
      this.artists_list = hotSinger.artists;
    },
    // 热门歌单点击切换
    choosePlayListType(index) {
      this.playlist_index = index;
      this.playlist_params.cat =
        index !== 0 ? this.playlist_tags[index].name : "";
      this.getPlayList(this.playlist_params);
    },
    //点击新碟歌单标签进行切换
    chooseAlbumType(index) {
      this.album_index = index;
      this.album_params.area = index !== 0 ? this.album_area[index].code : "";
      this.getAlbum(this.album_params);
    },
    //点击mv标签进行切换
    chooseMvType(index) {
      this.mv_index = index;
      this.mv_params.area = index !== 0 ? this.mv_area[index] : "";
      this.getMv(this.mv_params);
    },
  },
};
</script>

<style scoped lang="less">
.h_title {
  padding: 20px 0 0;
  text-align: center;

  h3 {
    padding: 20px 0;
    font-size: 28px;
    font-weight: 700;
  }

  span {
    display: inline-block;
    font-size: 16px;
    margin: 0 24px;
    color: #333;
    cursor: pointer;

    &.active {
      position: relative;
      font-weight: 600;
      color: #000;
      &:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 6px;
        background: #ff641e;
        z-index: -1;
      }
    }
  }
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.toplist_item {
  position: relative;
  margin-bottom: 30px;
  .coverImg {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 10px;
    right: 10px;
    z-index: 1;
    height: 100%;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      content: "";
      width: 100%;
      height: 100%;
    }
    /deep/ img {
      filter: blur(60px);
      transform: scale(1.5);
    }
  }
  .toplist_wrapper {
    position: relative;
    z-index: 2;
    padding: 30px 40px;
    height: 505px;
    .toplist_hd {
      position: relative;
      font-size: 24px;
      text-align: center;
      color: #fff;

      &::after {
        display: inline-block;
        content: "";
        position: absolute;
        bottom: -30px;
        left: 0;
        right: 0;
        background-color: #fff;
        width: 30px;
        height: 2px;
        margin: 0 auto;
      }
    }
    .toplist_songlist {
      padding-top: 80px;
    }
    .songitem {
      display: flex;
      padding-bottom: 20px;
      color: #fff;

      .songnum {
        padding-right: 10px;
        font-size: 18px;
      }
      .song_title {
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        padding-bottom: 5px;
        font-size: 14px;
        color: #fff;
      }
      .song_author {
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #fff;

        a {
          display: inline-block;
          line-height: 20px;
          font-size: 14px;
          color: #fff;
        }
      }
      &:last-child {
        padding-bottom: 0;
      }
    }
  }
  &:hover {
    /deep/img {
      transform: scale(2);
    }
  }
}
.artists_item {
  width: 120px;

  .el-image {
    transition: all 0.4s linear;
  }

  &:hover {
    .el-image {
      transform: rotateY(180deg);
    }
  }

  .faceImg {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    overflow: hidden;
  }

  .info {
    text-align: center;

    .name {
      line-height: 28px;
      font-size: 14px;
    }

    .albumSize {
      color: #999;
    }
  }
}

.artists_list {
  padding-bottom: 40px;
  margin-bottom: 50px;
}
</style>
